<template>
  <div>
    <h1>生命周期</h1>
    <p>名字L{{ name }}</p>
    <p>
        <span>{{ count }}</span>
        <button @click="count += 1">+</button>
    </p>
  </div>
</template>

<script>
export default {
    data(){
        return{
            name:'cz',
            count: 0,
            timer: null
        }
    },
    beforeCreate(){
        console.log('1.beforeCreate执行');
        console.log('name',this.name);
    },
    created(){
        console.log('2.created执行');
        console.log('name',this.name);
        this.testFn()
        this.timer = setInterval(()=>{
            console.log('hello');
        },500)
    },
    beforeMount(){
        console.log('3.beforeMount');
        this.getDom()
    },
    mounted(){
        console.log('4.mount');
        this.getDom()
    },
    beforeUpdate(){
        console.log('5.beforeUpdate');
        console.log('count',this.count);
        this.getDomVal()
    },
    updated(){
        console.log('6.updated');
        this.getDomVal()
    },
    beforeDestroy(){
        console.log('7.beforeDestroy');
       clearInterval(this.timer)
    },
    destroyed(){
        console.log('8.destroyed');
    },
    methods:{
        getDomVal(){
            let val = document.querySelector('sp')
            console.log('domVal',val);
        },
        getDom(){
            let p = document.querySelector('p')
            console.log('p',p);
        },
        testFn(){
            console.log('testFn方法被执行');
        },
        getData(){ 
        }
    }
}
</script>

<style>

</style>